<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
export default {
  mounted() {
    const echart = echarts.init(this.$refs.chart)
    echart.setOption({
      title: [
        {
          text: '60%',
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: '16',
            color: '#fff',
            fontFamily: 'PingFang SC',
            fontWeight: '800'
          }
        }
      ],
      legend: {
        orient: 'vertical',
        left: 10,
        data: ['出让地块', '总地块']
      },
      polar: {
        radius: ['70%', '80%'],
        center: ['50%', '50%']
      },
      angleAxis: {
        max: 1000,
        show: false
      },
      radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      series: [
        {
          name: '',
          type: 'bar',
          roundCap: true,
          barWidth: 60,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(0, 82, 120, 1)'
          },
          data: [
            {
              value: 60,
              name: '出让地块'
            }
          ],
          coordinateSystem: 'polar',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: 'rgba(2, 194, 251, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(7, 253, 202, 1)'
                  }
                ]
              )
            }
          }
        }
      ]
    })
    window.addEventListener('resize', function () {
      echart.resize()
    })
  }
}
</script>

<style lang="scss" scoped>
.chart {
  height: 100px;
}
</style>
